﻿<template>
    <div class="app-container">
        <!--一行-->
        <el-row :gutter="20">
            <el-col :span="4" :xs="24">
                <el-input
                        placeholder="输入关键字进行过滤"
                        v-model="deptName"
                        clearable
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px">
                </el-input>

                <el-tree
                        class="filter-tree"
                        :data="deptData"
                        :props="defaultProps"
                        default-expand-all
                        :filter-node-method="filterNode"
                        ref="tree"
                        >
                </el-tree>

            </el-col>
            <el-col :span="20" :xs="24"></el-col>
        </el-row>
    </div>
</template>

<script>
    import request from "../utils/request";
    export default {
        name: "dept",
        data() {
           return {
               deptData: undefined,  //部门数据
               // 部门名称
               deptName: undefined,
               defaultProps: {
                   children: "children",
                   label: "label"
               },
           }
        },

        watch: {
            // 根据名称筛选部门树
            deptName(val) {
                this.$refs.tree.filter(val);
            }
        },

        created() {
            this.getTreeselect();
        },

        methods:{
            getTreeselect(){
                request.get('/dept/treeselect').then(res => {
                    this.deptData = res.data;
                })
            },

            // 筛选节点（过滤函数）
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
        }


    }
</script>

<style scoped>
    .app-container{
        padding: 15px;
    }
</style>
